---
import ButtonA from "../ButtonA.astro"
interface Props {
  fontFamily: "mono" | "supermolot" // restrict to these two options
  label: string
  sampleText?: string
  class?: string
  link: string
}

const { label, fontFamily, sampleText, class: className = "", link } = Astro.props

const fontDetails = {
  mono: {
    name: "JetBrains Mono",
    variants: ["Regular", "Bold"],
  },
  supermolot: {
    name: "Supermolot",
    variants: ["Bold"],
  },
}

const currentFont = fontDetails[fontFamily]
---

<div class="h-fit">
  <div class="flex w-fit gap-4 h-40 sm:h-48">
    <div class="flex gap-2">
      <p class="[writing-mode:vertical-lr] text-accent-500">
        {label.toUpperCase()}
      </p>
      <div class="flex flex-col">
        <div class="w-4 h-[1px] bg-accent-500"></div>
        <div class="w-[1px] h-full bg-accent-500"></div>
        <div class="w-4 h-[1px] bg-accent-500"></div>
      </div>
    </div>
    <div class="flex flex-col h-full w-full">
      <slot />
    </div>
  </div>
  <div class="flex flex-col gap-4 p-8">
    {
      currentFont.variants.map((variant) => (
        <p
          class={`font-${fontFamily} ${
            variant.toLowerCase() === "bold" ? "font-bold" : "font-normal"
          } text-lg`}
        >
          {currentFont.name} {variant}
        </p>
      ))
    }
    <a
      href={link}
      target="_blank"
      class="text-accent-500 font-mono font-bold"
    >[DOWNLOAD]</a>
  </div>
</div>
